<div>
  <!-- <div style="display:none;" class="resource-banner">
        <div style="position: relative;" class="box">
            <i class="resource-cloud"></i>
            <i class="resource-big"></i>
            <i class="resource-middle"></i>
            <i class="resource-small"></i>
            <i class="resource-mini"></i>
            <ul class="switch-banner-nav clearfix">
                <li @click="switchBannerNav($event)" class="active">
                    <i class="iconfont icon-data"></i>数据资源
                </li>
                <li @click="switchBannerNav($event)">
                    <i class="iconfont icon-yun"></i>云环境资源
                </li>
            </ul>
        </div>
    </div> -->
  <div id="resource-center" class="box clearfix">
    <div class="first-panel-content clearfix">
      <!--<div class="first-category-header">
        <span>服务中心</span>
      </div>-->
      <ul class="first-category">
        <li @click="firstCategoryClick('数据资源', $event)" class="first-category-active">
          <span class="iconfont icon-data"></span> 数据资源
        </li>
        <!-- <li @click="firstCategoryClick('云环境资源', $event)">
                    <span class="iconfont icon-yun"></span> 
                    云环境资源
                </li>
                <li @click="firstCategoryClick('模型资源', $event)">
                    <span class="iconfont icon-model"></span> 
                    模型资源
                </li> -->
        <li @click="firstCategoryClick('预申请资源', $event)">
          <span class="iconfont icon-shoucang"></span> 预申请资源
        </li>
        <li @click="firstCategoryClick('已申请资源', $event)">
          <span class="iconfont icon-gouwuche"></span> 已申请资源
        </li>
      </ul>
      <div v-if="curFirstCategory!='已申请资源'" class="second-category">
        <dl v-if="userInfo&&userInfo.role=='admin' || item.group!='权限分类'" v-for="item in secondCategoryList"
          :key="item.id">
          <dt>{{item.group}}</dt>
          <dd @click.stop="secondCategoryClick(subItem, $event)" :class="{'second-category-active':subItem.active}"
            v-if="index<4&&(curFirstCategory=='数据资源'||curFirstCategory=='预申请资源'&&subItem.name!='公共资源')"
            v-for="(subItem,index) in item.list">
            <span :title="subItem.name">{{subItem.name}}</span>
            <span v-if="curFirstCategory=='数据资源'" style="float:right;">
              {{subItem.count}}
            </span>
          </dd>
          <dd @click.stop="handleLoadMore(item, $event)" v-if="item.list.length>4">
            <span style='font-weight: 600'>更多</span>
            <span class="iconfont icon-light-arrow-down">
            </span>
          </dd>
          <dd @click.stop="secondCategoryClick(subItem, $event)" :class="{'second-category-active':subItem.active}"
            v-if="index>=4 && !item.collapse" v-for="(subItem,index) in item.list">
            <span :title="subItem.name">{{subItem.name}}</span>
            <span v-if="curFirstCategory=='数据资源'" style="float:right;">
              {{subItem.count}}
            </span>
          </dd>
        </dl>
      </div>
      <div class="data-resource">
        <div v-if="curFirstCategory!='已申请资源'" class="filter-panel">
          <div class="search-container clearfix">
            <ul class="left">
              <li>
                <el-input class="search-input" @change="searchInputChange" size="small" placeholder="请输入资源名称搜索"
                  prefix-icon="el-icon-search" v-model="searchInput">
                </el-input>
              </li>
              <li>共找到（{{total}}个）</li>
            </ul>
            <ul class="right">
              <li @click="handleSort('praiseCount', $event)">
                <i class="iconfont icon-sort-desc"></i>
                <span>点赞量</span>
              </li>
              <li @click="handleSort('applyCount', $event)">
                <i class="iconfont icon-sort-desc"></i>
                <span>申请量</span>
              </li>
              <li @click="handleSort('viewCount', $event)">
                <i class="iconfont icon-sort-desc"></i>
                <span>浏览量</span>
              </li>
              <li @click="handleSort('updatedAt', $event)" class="sort-active">
                <i class="iconfont icon-sort-desc"></i>
                <span>时间</span>
              </li>
            </ul>
          </div>
          <div class="selected-container">
            <span class="label-span">已选择</span>
            <el-tag :key="item.key" v-for="item in dynamicTags" size="small" closable :disable-transitions="false"
              @close="handleTagClose(item)">
              {{item.tag}}
            </el-tag>
            <el-button @click="handleClearSelected" class="clearSelected" size="mini" type="text">
              清空筛选
            </el-button>
          </div>
        </div>
        <div class="list-container">
          <!-- 数据资源 -->
          <div v-if="curFirstCategory=='数据资源'" style='height:600px'>
            <el-scrollbar>
              <div v-for="item in dataList" :key="item.key" class="list-item-box">
                <div style="position:relative;width:245px;height:155px;background:#4b4e56"
                  @mouseenter="handleImgMouseover(item, $event)" @mouseleave="handleImgMouseout(item, $event)">
                  <img v-if='item.img!="static/images/data_resource.png"' class="data-img" @click="handlePreview(item)"
                    @error="handleImgError(item)" :src="item.img" alt="暂无图片">
                  <div class="img-mask">
                    <div v-if="item.deptName">部门：{{item.deptName}}</div>
                    <div v-if="item.groupName">群组：{{item.groupName}}</div>
                    <ul class="clearfix">
                      <li v-if="item.label">
                        <span v-for="itemLabel in item.label.split(',')">{{itemLabel}}</span>
                      </li>
                      <li>
                        <span title="浏览量" class="iconfont_tj iconliulan">
                          {{item.viewCount}}
                        </span>
                        <span title="点赞量" class="iconfont_tj icondianzan">
                          {{item.praiseCount}}
                        </span>
                        <span title="申请量" class="iconfont_tj iconxinshenqing">
                          {{item.applyCount}}
                        </span>
                      </li>
                    </ul>
                  </div>
                </div>

                <div class="bottom">
                  <p class="data-name clearfix">
                    <span :title="item.name">{{item.name}}</span>
                    <span>{{item.count}}条记录</span>
                  </p>
                  <!-- <p class="data-time clearfix">
                    <span>{{item.updatedAt | formatDate}}</span>
                    <span v-if="item.ownerType != 0 && item.preApplyId==null && item.apply!=1"
                      @click="handelResPreApply(item)" title="预申请资源" class="iconfont icon-shoucang-hollow">
                    </span>
                    <span v-if="item.ownerType != 0 && item.preApplyId!=null && item.apply!=1"
                      @click="handelResPreApply(item)" title="预申请资源" class="iconfont icon-shoucang-solid">
                    </span>
                    <span v-if="item.ownerType != 0 && item.apply!=1" @click="handleResApply('申请资源', item)" title="申请资源"
                      class="iconfont icon-gouwuche">
                    </span>
                  </p> -->
                  <p class="data-time clearfix">
                    <span>{{item.updatedAt | formatDate}}</span>
                    <span v-if=" item.preApplyId==null && item.apply!=1" @click="handelResPreApply(item)" title="预申请资源"
                      class="iconfont_tj iconshoucang">
                    </span>
                    <span v-if=" item.preApplyId!=null && item.apply!=1" @click="handelResPreApply(item)" title="预申请资源"
                      class="iconfont_tj iconshoucang">
                    </span>
                    <span v-if=" item.apply!=1" @click="handleResApply('申请资源', item)" title="申请资源"
                      class="iconfont_tj iconxinshenqing">
                    </span>
                  </p>
                </div>
              </div>
              <div v-if="curFirstCategory=='数据资源'" class="load-more">
                <el-button v-if="hasNext" @click="handleLoadMore('数据资源')" size="small" round>
                  加载更多
                </el-button>
              </div>
            </el-scrollbar>
          </div>
          <!-- 预申请资源 -->
          <div v-if="curFirstCategory=='预申请资源'">
            <el-scrollbar>
              <el-table :data="preApplyResList" @selection-change="handleSelectionChange" style="width: 100%">
                <el-table-column type="selection" min-width="40">
                  <!-- <template slot-scope="scope">
                                    <span>全选</span>
                                </template> -->
                </el-table-column>
                <el-table-column prop="name" label="资源基本信息" min-width="330">
                  <template slot-scope="scope">
                    <div class="basicInfo clearfix">
                      <div class="left">
                        <img @click="handlePreview(scope.row)" :src="scope.row.img" @error="handleImgError(scope.row)"
                          alt="暂无图片">
                      </div>
                      <ul class="right">
                        <li :title="scope.row.name">{{scope.row.name}}</li>
                        <li>{{scope.row.count}}条记录</li>
                        <li class="icon-container">
                          <span title="浏览量" class="iconfont_tj iconliulan">
                            {{scope.row.viewCount}}
                          </span>
                          <span title="点赞量" class="iconfont_tj icondianzan">
                            {{scope.row.praiseCount}}
                          </span>
                          <!-- <i>
                            <svg t="1557129039495" class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
                              xmlns="http://www.w3.org/2000/svg" p-id="1174" xmlns:xlink="http://www.w3.org/1999/xlink"
                              width="16" height="16">
                              <path
                                d="M962.315102 213.634612c-10.458189-11.901051-25.541723-18.729573-41.384549-18.733667l-678.028361-0.183172c-4.663206-0.001023-8.609075-3.445472-9.241478-8.064676l-13.902638-101.536534c-4.000104-29.215392-29.253254-51.346435-58.739822-51.477418L56.600089 33.17047c-16.321734-0.073678-29.612435 13.098319-29.686113 29.420053l-0.033769 7.407714c-0.073678 16.321734 13.098319 29.612435 29.421077 29.686113l98.375541 0.441045 77.927837 569.135278c1.337461 49.16884 41.750893 88.75544 91.236957 88.75544l507.133156 0c49.532113 0 89.975221-39.658232 91.241051-88.890516l53.355185-412.039357C977.605344 241.374396 972.773292 225.536686 962.315102 213.634612zM904.543328 287.651372l-48.53439 374.822734-0.276293 2.12643 0 2.14485c0 13.673417-11.084453 24.756847-24.756847 24.756847L323.842643 691.502233c-13.673417 0-24.756847-11.084453-24.756847-24.756847l0-2.266623L247.489674 287.654442c-1.913583-13.972223 8.947789-26.417673 23.049972-26.41358l610.943476 0.164752C895.511627 261.408685 906.344347 273.738501 904.543328 287.651372z"
                                p-id="1175"></path>
                              <path
                                d="M362.938056 813.192783c-53.886281 0-97.725742 43.839461-97.725742 97.725742s43.839461 97.725742 97.725742 97.725742 97.725742-43.839461 97.725742-97.725742S416.824337 813.192783 362.938056 813.192783zM362.938056 942.129364c-17.209964 0-31.210839-14.001899-31.210839-31.210839s14.000875-31.210839 31.210839-31.210839 31.210839 14.001899 31.210839 31.210839S380.14802 942.129364 362.938056 942.129364z"
                                p-id="1176"></path>
                              <path
                                d="M801.488207 813.192783c-53.886281 0-97.725742 43.839461-97.725742 97.725742s43.839461 97.725742 97.725742 97.725742 97.725742-43.839461 97.725742-97.725742S855.374488 813.192783 801.488207 813.192783zM801.488207 942.129364c-17.20894 0-31.210839-14.001899-31.210839-31.210839s14.001899-31.210839 31.210839-31.210839 31.210839 14.001899 31.210839 31.210839S818.698171 942.129364 801.488207 942.129364z"
                                p-id="1177"></path>
                            </svg>
                          </i> -->
                          <span title="申请量" class="iconfont_tj iconxinshenqing">
                            {{scope.row.applyCount}}
                          </span>
                        </li>
                      </ul>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="publishingUnit" label="数据来源" min-width="180">
                </el-table-column>
                <el-table-column prop="time" label="发布时间" min-width="100">
                </el-table-column>
                <el-table-column align="center" prop="operate" label="操作" min-width="100">
                  <template slot-scope="scope">
                    <div style="margin-bottom:5px;">
                      <el-button size="mini" round
                        @click.native.prevent="deletePreApplyRow(scope.$index, preApplyResList)">
                        移除
                      </el-button>
                    </div>
                    <div>
                      <el-button style="margin-left:0" size="mini" round @click="handlePreview(scope.row)">
                        预览
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="load-more">
                <el-button v-if="hasNext" @click="handleLoadMore('预申请资源')" size="small" round>
                  加载更多
                </el-button>
              </div>
            </el-scrollbar>
            <div style="text-align:right; margin-top:30px;">
              <span style="margin-right:10px;">
                共选中{{multipleSelection.length}}个数据资源
              </span>
              <el-button @click="handleResApply('预申请资源', multipleSelection)" size="small" type="primary">
                提交申请
              </el-button>
            </div>
          </div>

        </div>
        <!-- 已申请资源 -->
        <div v-if="curFirstCategory=='已申请资源'" style='width:1000px'>
          <el-scrollbar>
            <div class="gutter">
              <el-input size="medium" class="search-input" style="width:300px;" @change="searchAppliedInputChange"
                placeholder="请输入申请标题进行搜索" prefix-icon="el-icon-search" v-model="searchAppliedInput">
              </el-input>
            </div>
            <div class="applied-list gutter">
              <ul class="clearfix header gutter">
                <li>资源基本信息</li>
                <li>申请状态</li>
                <li>使用权限</li>
                <li>操作</li>
              </ul>
              <dl v-for="(appliedItem,index) in appliedList" :key="appliedItem.id">
                <dt class="clearfix gutter">
                  <span>{{appliedItem.ts}}</span>
                  <span>申请标题：{{appliedItem.title}}</span>
                  <span @click="deleteAppliedRes({item:appliedItem,index:index})" class="right delete-btn">删除</span>
                  <span @click="queryAppliedComment(appliedItem)" class="right view-comment">查看备注</span>

                </dt>
                <dd style="padding:10px 0;">
                  <ul v-for="(resourceItem,index2) in appliedItem.resourceList" class="gutter applied-item clearfix">
                    <li class="basicInfo clearfix">
                      <div class="left">
                        <img @click="handlePreview(resourceItem)" :src="resourceItem.img"
                          @error="handleImgError(resourceItem)" alt="暂无图片">
                      </div>
                      <ul class="right">
                        <li :title="resourceItem.name">{{resourceItem.name}}</li>
                        <li>{{resourceItem.count}}条记录</li>
                        <li class="icon-container">
                          <span title="浏览量" class="iconfont_tj iconliulan">
                            {{resourceItem.viewCount}}
                          </span>
                          <span title="点赞量" class="iconfont_tj icondianzan">
                            {{resourceItem.praiseCount}}
                          </span>
                          <span title="申请量" class="iconfont_tj iconxinshenqing">
                            {{resourceItem.applyCount}}
                          </span>
                        </li>
                      </ul>
                    </li>
                    <li class="status">
                      <div style="padding-right:20px;">
                        <span title="待审核" v-if="resourceItem.approveStatus==1" class="iconfont_tj icontixing">待审核</span>
                        <span title="已通过" v-else-if="resourceItem.approveStatus==2"
                          class="iconfont_tj icontongguo">已通过</span>
                        <span title="未通过" v-else-if="resourceItem.approveStatus==3"
                          class="iconfont_tj iconjujue">未通过</span>
                      </div>
                    </li>
                    <li class="authority">
                      <span
                        :title="resourceItem.ownerType!='3'?resourceItem[ownerTypeList[resourceItem.ownerType]]:'个人使用'">
                        {{resourceItem.ownerType!='3'?resourceItem[ownerTypeList[resourceItem.ownerType]]:'个人使用'}}
                      </span>

                    </li>
                    <li class="operate">
                      <div style="margin-bottom:5px;">
                        <el-button @click="handlePreview(resourceItem)" size="mini" round>预览</el-button>
                      </div>
                      <div>
                        <el-button @click="handelPraise(resourceItem)" size="mini" round>点赞</el-button>
                      </div>
                    </li>
                  </ul>
                </dd>
              </dl>
            </div>
            <div class="load-more">
              <el-button v-if="hasNext" @click="handleLoadMore('已申请资源')" size="small" round>
                加载更多
              </el-button>
            </div>
          </el-scrollbar>
        </div>

      </div>
    </div>

    <el-dialog :title="mapPreviewVisible?'地图预览':'元数据信息'" custom-class="map-dialog" :visible.sync="mapDialogVisible"
      :fullscreen="false" :close-on-click-modal="false" top="5vh" width="90%">
      <div v-show="mapPreviewVisible" id="map-container">
        <div title="底图" @click="switchBasemap" class="switch-basemap">
          <span class="iconfont_tj iconmap"></span>
        </div>
      </div>
      <div v-show="!mapPreviewVisible" style="height:100%;background:#fff;">
        <div id="metaData-container">
          <div class="dataDescribe">
            <h4><span class="iconfont icon-doc"></span> 数据描述</h4>
            <el-table :data="dataDescribeTableData" :show-header="false" :cell-style="dataDescribeCellStyle" border
              style="width: 100%">
              <el-table-column prop="label" label="字段名" width="180">
              </el-table-column>
              <el-table-column prop="value" label="字段值">
              </el-table-column>
            </el-table>
          </div>
          <div class="fieldDescribe">
            <h4><span class="iconfont icon-field"></span> 字段描述</h4>
            <el-table :data="fieldDescribeTableData" :show-header="true" border style="width: 100%">
              <el-table-column prop="name" label="字段名称" width="180">
              </el-table-column>
              <el-table-column prop="type" label="类型" width="180">
              </el-table-column>
              <el-table-column prop="alias" label="别名" width="180">
              </el-table-column>
              <el-table-column prop="unit" label="单位" width="180">
              </el-table-column>
              <el-table-column prop="desc" label="描述">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <ul class="map-bottom-widgets clearfix">
        <li @click="switchMapWidgets('metadata',$event)" title="元数据信息"><span class="iconfont icon-info-o"></span></li>
        <li @click="switchMapWidgets('map',$event)" class="active" title="地图预览"><span
            class="iconfont_tj iconmap"></span></li>
      </ul>
    </el-dialog>
    <!-- <el-dialog title="地图预览" custom-class="map-dialog" :visible.sync="mapDialogVisible" :fullscreen="false"
      :close-on-click-modal="false" top="5vh" width="90%">
      <div id="map-container">
        <div @click="switchBasemap" class="switch-basemap">
          <span class="iconfont_tj iconmap"></span>
        </div>
      </div>
    </el-dialog> -->
    <el-dialog title="资源申请" custom-class="resource-apply-dialog" :visible.sync="resourceApplydialogVisible"
      @close="handleResApplyDialogClose" :fullscreen="false" width="800px">
      <div class="resApply-dialog-body">
        <!-- <el-scrollbar style="height: 100%;"> -->
        <el-form style="padding-right:30px;" class="resource-apply" ref="form" label-width="80px">
          <ul v-if="resDuplicateList.length>0" class="res-duplicate">
            <li v-for="(item, index) in resDuplicateList">
              <div class="clearfix">
                <span class="res-name" :title="item.resName">{{item.resName}}</span>
                <span @click="removeResDuplicate(index)" title="关闭" class="iconfont icon-close"></span>
              </div>
              <span :title="item.message" class="msg">
                {{item.message}}
              </span>
            </li>
          </ul>
          <!--
          <el-form-item label="资源权限">
            <el-cascader size="small" :change-on-select="true" :options="resourceAuthorityOptions"
              v-model="selectedResourceAuthorityOptions" @focus="handleCascaderFocus"
              @change="handleResourceAuthorityChange">
            </el-cascader>
          </el-form-item>
          -->
          <el-form-item label="申请标题">
            <el-input v-model="resApplyFormData.title" size="small"></el-input>
          </el-form-item>
          <el-form-item label="上传证明">
            <el-upload style="display:inline-block" class="upload-spatial-data" ref="upload" action=""
              :on-preview="handleUploadPreview" :on-remove="handleUploadRemove" :on-change="handleUploadChange"
              :file-list="fileList" :show-file-list="true" :auto-upload="false">
              <el-button type="primary" slot="trigger" size="small">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="resApplyFormData.comment" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <!-- </el-scrollbar> -->
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="resourceApplydialogVisible=false">取 消</el-button>
        <el-button size="small" @click="handleResApplySubmit" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</div>
